<template>
  <n-grid class="card" :x-gap="12" :cols="5">
    <n-grid-item v-for="(card,i) in data.cardList.value" v-bind:key="card">
      <n-card :title="card.title" @click="routers(i+1)">
        <template #cover>
          <img :src="card.imgSrc" alt="图片"/>
        </template>
        <div v-text="card.content"/>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script>
import {v4 as uuid} from 'uuid'
import {useRouter} from 'vue-router'
import {defineComponent, ref} from 'vue'
import {NCard, NGrid, NGridItem} from 'naive-ui'
import cardImg from '@/assets/1631108400448.jpg'

export default defineComponent({
  name: 'Home',
  components: {
    NGrid,
    NCard,
    NGridItem
  },
  setup() {
    const data = {
      cardList: ref([
        {
          title: 'SSH',
          content: 'Linux终端',
          imgSrc: cardImg
        },
        {
          title: 'SFTP',
          content: '文件传输管理',
          imgSrc: cardImg
        },
        {
          title: 'Two-way Communication',
          content: '双向通信',
          imgSrc: cardImg
        }
      ]),
      toke: uuid().substring(0, 8)
    }
    const router = useRouter()
    /* xterm路由 */
    const xterm = () => router.push({path: '/xterm', query: {toke: data.toke}})
    const routers = (index) => {
      switch (index) {
        case 1:
          xterm()
          break;
        default:
          break;
      }
    }
    return {
      data,
      routers
    }
  }
})
</script>
<style lang="scss" scoped>
.n-grid {
  div {
    margin: 0 auto;
  }
}

.card {
  margin: 1%;
  cursor: pointer;

  .n-card {
    width: 300px;
    height: 480px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    transition: all 0.2s ease-in-out;
    border-color: rgba(50, 110, 92, 0.5);
    box-shadow: 2px 2px 6px rgb(31 135 185 / 30%);

    ::v-deep(.n-card-header) {
      padding: 10px;
    }

    ::v-deep(.n-card__content) {
      display: flex;
      padding: 10px;
      align-items: center;
      box-sizing: border-box;
      border-top: 1px rgba(50, 110, 92, 0.5) dotted;

      div {
        flex: 1;
      }
    }
  }

  .n-card:hover {
    box-shadow: 2px 2px 6px rgb(31 135 185 / 80%);
  }
}
</style>
